<template>
  <div class="application-info-wrap">
    <SectionTitle title="申请信息" style="margin: 16px 0 8px;"/>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="130px"
      class="application-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col :span="12">
          <el-form-item label="审批单号:">
            <ToolTip :content="applicationInfo.approvalNo" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间:">
            <ToolTip :content="applicationInfo.createTime | format('YYYY/MM/DD HH:mm')" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建人:">
            <CheckUserInfo v-if="applicationInfo.creator" :label="applicationInfo.creator" :user-id="applicationInfo.creatorId" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属部门:">
            <ToolTip :content="applicationInfo.department" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请人:">
            <CheckUserInfo v-if="applicationInfo.proposer" :label="applicationInfo.proposer" :user-id="applicationInfo.proposerId" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请部门:">
            <ToolTip :content="applicationInfo.applyDepartment" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="我方抬头:">
            <ToolTip :content="applicationInfo.ourTitle" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发票类型:">
            <ToolTip :content="applicationInfo.invoiceType" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开票项目:">
            <ToolTip :content="applicationInfo.project" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="含税金额(元):">
            <div class="flex-center">
              <ToolTip :content="applicationInfo.amount" placement="top-start" />
              <el-tooltip :open-delay="800" placement="top" effect="dark">
                <div slot="content" style="max-width: 210px">
                  <span>开负数发票，请备注说明情况：</span><br>
                  <span>1. 已知原正数发票的情况：提供【正数发票】，一张正数发票对应一张负数发票，在备注填写发票号码</span><br>
                  <span>2. 未知正数发票的情况：提供【红字信息表】，一张红字信息表对应一张负数发票</span>
                </div>
                <tipIcon is-diy style="margin-left:6px;"/>
              </el-tooltip>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发票接收邮箱:">
            <ToolTip :content="applicationInfo.email" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务类型:">
            <el-tooltip :open-delay="800" placement="top" effect="dark">
              <div slot="content" style="max-width: 210px">
                <span v-if="[8,9].includes(applicationInfo.applyBusinessType)">
                  {{ applicationInfo.applyBusinessType === 8 ? '微博约稿、微博后台点击收益、其他视频平台点击收益' : '微博、抖音、小红书、B站' }}
                </span>
                <span v-else>{{ applicationInfo.applyBusinessType | applyBusinessTypeStatus }}</span>
              </div>
              <span>{{ applicationInfo.applyBusinessType | applyBusinessTypeStatus }}</span>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发票票面备注:">
            <ToolTip :content="applicationInfo.remark" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="附件:">
            <div class="ellipsis">
              <FileShowList
                v-if="applicationInfo.attachment && applicationInfo.attachment.length"
                :file-list="applicationInfo.attachment"
                style="max-width: 100%;"/>
              <span v-else>--</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否到账:">
            <ToolTip :content="applicationInfo.isArrival | arrivalStatus" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col v-if="applicationInfo.isArrival === 0" :span="12">
          <el-form-item label="合约付款日:">
            <ToolTip :content="applicationInfo.arrivalDate | format('YYYY/MM/DD')" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合同签订:">
            <ToolTip :content="applicationInfo.isSign | signStatus" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开票需求简要说明:">
            <ToolTip :content="applicationInfo.description" placement="top-start" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import FileShowList from '@/components/CreateOrder/fileShowList';
import SectionTitle from '@/components/Title';
import { format } from '@/filters/date';
import { applyBusinessTypeStatus } from '@/filters/status';
import { signStatus, arrivalStatus } from '../mixins';

export default {
  name: 'ApplicationInfoDetail',
  components: {
    SectionTitle,
    FileShowList
  },
  filters: {
    format,
    signStatus,
    arrivalStatus,
    applyBusinessTypeStatus
  },
  props: {
    applicationInfo: {
      type: Object,
      default: () => {}
    },
    showMobilePage: {
      type: Boolean,
      default: false
    }
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.application-info-wrap{
  .application-form {
    & ::v-deep {
      .el-form-item {
        .el-form-item__label {
          font-size: 14px;
          font-weight: 400;
          color: #999999 !important;
          opacity: 1;
          line-height: 30px;
        }
      }
      .el-form-item__content {
        font-size: 14px;
        line-height: 30px;
        font-weight: 400;
        color: #333333;
        opacity: 1;
      }
    }
  }
  .dividing {
    &::v-deep {
      .el-col {
        .el-form-item__content {
          border-right: 1px solid #EBEEFD;
        }
        &:nth-child(2n) {
          .el-form-item__content {
            border-right: none;
          }
        }
        &:last-child {
          .el-form-item__content {
            border-right: none;
          }
        }
      }
    }
  }
}
</style>
